<template>
  <div class="bar">
      <!-- 声明式导航 -->
    <router-link to="/shouye">  
       <span class="iconfont icon-shouye"></span>
       <p>首页</p> 
      </router-link>
    <router-link to="/xingcheng"> 
        <span class="iconfont icon-hangcheng"></span>
       <p>行程</p> 
    </router-link>
    <router-link to="/circle"> 
        <span class="iconfont icon-quanzi"></span>
       <p>圈子</p> 
    </router-link>
    <router-link to="/dongtai">
        <span class="iconfont icon-hangban"></span>
       <p>航班动态</p>    
    </router-link>
    <router-link to="/user">
        <span class="iconfont icon-31wode"></span>
       <p>我的</p>  
    </router-link>
  </div>
</template>

<script>

export default {


}
</script>

<style scoped>
/* 选中的背景色 */
.router-link-exact-active {
    /* background-color: rgba(86, 202, 248,0.8); */
}
.bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    background-color: rgb(255, 255, 255);
    z-index: 999;
}
a {
    flex: 1;
    text-align: center;
    /* background-color: turquoise; */
}
p {
    color: #ccc;
}
a span {
    color: #ccc;
    font-size: 24px;
}
/* 选中的字体颜色 */
.router-link-exact-active p {
    color: #4cb64e;
}
/* 选中的小图标颜色 */
.router-link-exact-active span {
    color: #4cb64e;
}

</style>
